<template>
    <div v-if="isShow">
        <div>
            <select @change="gamechange" v-model="nowgame" style="height: 22px;margin: 10px;">
                <option v-for="(item,index) in gamelist" :key="index" :value="item.value">{{item.name}}</option>
            </select>
            <span style="cursor: pointer;color: red;" @click="refreshFun"><img src="../../../../assets/images/refresh.png" style="width: 18px;height: 18px;vertical-align:sub;margin-right: 3px;" />刷新</span>
        </div>
        <x-table class="tableBox">
            <tr>
                <th>编号</th>
                <th>注单号/投注日期</th>
                <th>投注类型</th>
                <th>内容</th>
                <th>投注额</th>
                <th>可赢金额</th>
            </tr>
            <tr class="t_td_text" v-for="(item,index) in infoData.list" :key="index">
                <td>{{index+1}}</td>
                <td style="padding: 2px 0px;">{{item.orderID}}<br/>{{item.datetime}}</td>
                <td>{{item.game}}<br/>{{item.period}}期</td>
                <td><span class="red bolds" style="font-size: 12px;">{{item.title}}</span> @ <span class="red bolds" style="font-size: 12px;">{{item.rate}}</span><br/><span v-if="item.balls.length != 0" style="font-size: 13px;">[ {{item.balls.join('，')}} ]</span></td>
                <td>{{item.member.value}}</td>
                <td>{{item.member.wValue.toFixed(2)}}</td>
            </tr>
            <tr style="background: bisque;height: 26px;">
                <td colspan="4" style="text-align: right;">此页面统计：</td>
                <td>{{infoData.sum.current.sumV.toFixed(2)}}</td>
                <td>{{infoData.sum.current.sumW.toFixed(2)}}</td>
            </tr>
            <tr style="background: bisque;height: 26px;">
                <td colspan="4" style="text-align: right;">总计：</td>
                <td>{{infoData.sum.total.sumV.toFixed(2)}}</td>
                <td>{{infoData.sum.total.sumW.toFixed(2)}}</td>
            </tr>
        </x-table>
        <div class="tdBg text-right lineT">
            <span>页数：</span>
                <select @change="selchange" style="height: 18px;">
                    <option v-for="(item,index) in infoData.pages" :key="index" :value="item">{{item}}</option>
                </select>
            <span> / {{infoData.pages}} 页 共 {{infoData.total}} 条记录</span>
        </div>
    </div>
</template>
<style scoped>
    .tableBox{
        background-color: #fff;
        text-align: center;
        width: 100%;
    }
    .tableBox th{
        background: #e2d4ca;
        border-bottom: 1px solid #c3b1a4;
        border-top: 1px solid #ebe1d9;
        font-size: 12px;
        line-height: 22px;
        font-weight: bold;
    }
    .tableBox tr{
        font-size: 12px;
        line-height: 22px;
    }
    .tdBg{
        background: #f6f1ee;
        padding: 3px 8px;
        font-size: 12px;
    }
    .marginright{
        margin-right: 20px;
    }
    .marginright>i{
        font-style: normal;
    }
    .lineT{
        border-top: 1px solid #dcd1ca;
    }
</style>
<script>

    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    import { XTable } from 'vux'

    export default {
        name: "NoteList",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            
        },
        components: {
            XTable
        },
        data(){
            return{
                infoData: {},
                page: 1,
                isShow: false,
                gamelist: [
                    {'name': '全部','value': '0'},
                    {'name': 'PC蛋蛋','value': 'PC蛋蛋'},
                    {'name': '六合彩','value': '六合彩'},
                    {'name': '北京PK拾','value': '北京PK拾'},
                    {'name': '北京快乐8','value': '北京快乐8'},
                    {'name': '天津时时彩','value': '天津时时彩'},
                    {'name': '安徽快3','value': '安徽快3'},
                    {'name': '山东11选5','value': '山东11选5'},
                    {'name': '幸运飞艇','value': '幸运飞艇'},
                    {'name': '广东11选5','value': '广东11选5'},
                    {'name': '广东快乐十分','value': '广东快乐十分'},
                    {'name': '新疆时时彩','value': '新疆时时彩'},
                    {'name': '江苏快3','value': '江苏快3'},
                    {'name': '江西11选5','value': '江西11选5'},
                    {'name': '重庆幸运农场','value': '重庆幸运农场'},
                    {'name': '重庆时时彩','value': '重庆时时彩'},
                    {'name': '吉林快3','value': '吉林快3'},
                ],
                nowgame: '0',
            }
        },
        methods: {
            init(){

                //当前标题
                this.$emit('getTit','即时注单');

                var _this = this;
                this.$httpGet('/api/wager/today/' + _this.nowgame,{
                        'page': _this.page
                    }).then(response => {
                        
                    if(response.status == 200){
                        _this.infoData = response.data;
                        _this.isShow = true;
                    }

                });

            },
            //刷新
            refreshFun(){
                this.init();  //
            },
            //换页
            selchange(event){
                // console.log(event);
                this.page = event.target.value;
                this.init();
            },
            //
            gamechange(){
                this.init();
            },
            
        },
        mounted(){
            this.init();
        },
        watch: {
            openBet: function(now,old){
                // console.log(now,old);
                //开奖  刷新路珠数据
                this.init();
                
            },
            ninetime: function(now,old){
                console.log('------------90s  账户信息');
                //90s  刷新数据
                this.init();
            },

        },
    }
</script>
